<template>
  <div class="crud-column">
    <el-button type="text" icon="el-icon-plus" plain @click="handleRowUpdate"> 添加 </el-button>
    <div class="crud-item"></div>
    <div v-for="(_, index) in selectValue" :key="index" class="ft-0">
      <div class="crud-item">
        <el-input
          v-model="selectValue[index].descriptionZh"
          placeholder="请输入中文"
          @input="onChange"
        />
      </div>
      <div class="crud-item">
        <el-input
          v-model="selectValue[index].descriptionEn"
          placeholder="请输入对应英文"
          @input="onChange"
        />
      </div>
      <el-button
        type="text"
        size="small"
        icon="el-icon-delete"
        @click="() => handleRowDelete(index)"
      >
      </el-button>
    </div>
  </div>
</template>

<script>
import _clonedeep from 'lodash.clonedeep'

export default {
  components: {},
  props: {
    value: {
      type: [Array, String],
      default: () => [],
    },
  },
  data() {
    return {
      selectValue: [],
    }
  },
  computed: {},
  watch: {
    value: {
      handler(val) {
        this.selectValue = val ? _clonedeep(val) : []
      },
      immediate: true,
    },
  },
  methods: {
    onChange(e) {
      this.$emit('input', _clonedeep(this.selectValue))
    },
    handleRowUpdate() {
      this.selectValue.push({
        descriptionZh: '',
        descriptionEn: '',
      })
      this.$emit('input', _clonedeep(this.selectValue))
    },
    handleRowDelete(index) {
      this.selectValue.splice(index, 1)
      this.$emit('input', _clonedeep(this.selectValue))
    },
  },
}
</script>

<style lang="less" scoped>
.crud-column {
  .crud-item {
    display: inline-block;
    margin-top: 10px;
    flex: 1;

    &:nth-child(2n) {
      margin-left: 2%;
    }
  }

  .ft-0 {
    display: flex;
    font-size: 0;

    .el-button {
      padding: 5px 10px;
    }
  }
}
</style>
